<template>
  <!-- 邮箱 -->
  <view class="pd">
    <input
      type="email"
      v-model="email"
      placeholder="请输入邮箱"
      :disabled="userInfo.email ? true : false"
    />

    <button
      class="mainBg"
      style="border-radius: 200rpx; color: #fff; margin-top: 30rpx"
      :disabled="disabled"
      :class="disabled ? 'bg-main-disabled' : ''"
      @click="submit"
    >
      设置
    </button>
  </view>
</template>

<script>
import { mapState } from "vuex";

import { bindemail } from "@/api/api";
export default {
  data() {
    return {
      email: "",
    };
  },
  computed: {
    disabled() {
      return this.email === "";
    },
    ...mapState(["userInfo"]),
  },
  onLoad() {
    this.email = this.userInfo.email;
  },
  methods: {
    check() {
      let rule = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      if (!rule.test(this.email)) {
        uni.showToast({
          title: "邮箱格式不正确",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    async submit() {
      if (this.check()) {
        let res = await bindemail({ email: this.email });
        console.log(res);
        this.$store.commit("edituser", { key: "email", value: this.email });

        uni.showToast({
          title: "邮箱绑定成功",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateBack({});
        }, 500);
      }
    },
  },
};
</script>

<style></style>
